<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <button id="btn">选号</button>
    <script>
        /*
            选做题
            双色球规则：红球一共6个，每个从1-33中随机抽取一个(标准规则六个互相不重复)。然后蓝球是从1-16中抽取一个数字，这组数字就产生看一组双色球
        */
        // 将红球可以使用的数字放到一个数组中，随机的从数组中取一个数字，为了保证不重复。取完数字后删除这个元素

        function makeNumber(start, end) {
            return parseInt(Math.random() * (end - start + 1) + start);
        }
        btn.onclick = function () {
            // 生成蓝球
            var blueBall = makeNumber(1, 16);
            // 红球需要唯一 所以将1-33这些数字放到一个数组中。每次从数组中随机取一个元素，在将元素删除调
            var sourceNumber = [];
            for (var i = 1; i <= 33; i++) {
                sourceNumber.push(i);
            }
            var redBall = [];

            var html ='红球：';
            for (var i = 0; i < 6; i++) {
                // 生成数组的随机下标
                var index = makeNumber(0, sourceNumber.length - 1);
                // 将随机下标对应的数组加入到红球数组中
                redBall.push(sourceNumber[index]);
                // 将取出的元素从数组中移除
                sourceNumber.splice(index, 1);
                html+= sourceNumber[index]+'-'
            }
            html += `蓝球：${blueBall}`
            app.innerHTML = html;
        }
    </script>
</body>

</html>